<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
</head>
<!-- 
    需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
    需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 
-->

<body>
    <div id="root">
        <h2>当前的n值为: <span v-text="n"></span></h2>
        <input type="text" v-fbind:value="n">
        <button @click="n++">n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;

    const vm = new Vue({
        el: '#root',
        data: {
            n: 1
        },
        directives: {

            //函数式写法为bind与update的结合

            /* fbind: function (element, binding) {
                element.value = binding.value;

                // element.autofocus = true;//行，因为此时真实dom元素已经生成，内存中与指令建立联系，还没被插入到页面中

                element.focus();//不行，因为指令与标签绑定成功时（初始化时执行）是在指令第一次绑定到元素时调用的，仅代表在内存中建立了关系，真实的 DOM 元素可能还没有被插入到页面中；

                点击按钮时才获取焦点(指令所在的模板被重新解析时执行)：因为此时页面上dom元素已经存在了
            } */

            //第二种对象式写法
            fbind: {
                //指令与元素成功绑定时(一上来)调用
                bind: function (ele, binding) {
                    //此时真实dom元素已经生成，内存中与指令建立联系，还没被插入到页面中
                    //可以给dom元素，写一些样式，绑定事件等等
                    ele.value = binding.value;
                },
                // 指令所在元素被插入页面的时候调用
                inserted: function (ele, binding) {
                    //此时dom元素已经插入到页面中了
                    ele.focus();
                },
                // 指令所在的模板被重新解析时调用
                update: function (ele, binding) {
                    ele.value = binding.value;
                    ele.focus();//点击加一任然获取焦点
                }
            }
        }
    });
</script>

</html>